<template>
  <div class="menu-top">
    <img v-if="isCollapse" src="../../assets/logo.svg" class="logo" />
    <b v-else class="title">后台管理系统</b>
  </div>
  <el-scrollbar class="menu-wrapper">
    <el-menu
      :text-color="theme.asideText"
      :background-color="theme.asideBg"
      :style="['--el-menu-hover-bg-color:' + theme.asideHover]"
      :active-text-color="theme.asideActive"
      :default-active="route.path"
      :collapse-transition="false"
      :collapse="isCollapse"
      router
    >
      <el-menu-item index="/">
        <el-icon>
          <DataBoard />
        </el-icon>
        <span>控制台</span>
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>
          <el-icon>
            <Setting />
          </el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/user_manage">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span>用户管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/role_manage">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>角色管理</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/place_manage">
        <el-icon>
          <House />
        </el-icon>
        <span>林场管理</span>
      </el-menu-item>
      <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <Reading />
          </el-icon>
          <span>林业科普</span>
        </template>
        <el-menu-item index="/banner_manage">
          <el-icon>
            <Picture />
          </el-icon>
          <span>轮播管理</span>
        </el-menu-item>
        <el-menu-item index="/article_manage">
          <el-icon>
            <FirstAidKit />
          </el-icon>
          <span>科普管理</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon>
            <View />
          </el-icon>
          <span>监控管理</span>
        </template>
        <el-menu-item index="/device_manage">
          <template #title>
            <el-icon>
              <SwitchButton />
            </el-icon>
            <span>设备管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/monitor_log">
          <template #title>
            <el-icon>
              <Document />
            </el-icon>
            <span>监控数据</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>
          <el-icon>
            <Bell />
          </el-icon>
          <span>报警管理</span>
        </template>
        <el-menu-item index="/alarm_setting">
          <template #title>
            <el-icon>
              <Warning />
            </el-icon>
            <span>报警设置</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/alarm_log">
          <template #title>
            <el-icon>
              <List />
            </el-icon>
            <span>报警日志</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="666" disabled>
        <span>@author: 杜勇</span>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
  import { computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useUserStore } from '@/stores/user'

  const userStore = useUserStore()
  const theme = computed(() => {
    return userStore.theme
  })
  const router = useRouter()
  const route = useRoute()
  const props = defineProps({
    isCollapse: {
      type: Boolean,
      default: false
    }
  })
</script>

<style scoped>
  .menu-wrapper {
    width: 100%;
    height: calc(100vh - 60px);
  }

  .menu-content {
    min-height: 100vh;
    overflow: hidden;
    border: 0;
  }

  .wrap-content {
    height: 100%;
    overflow-y: scroll;
  }

  .menu-top {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 20px;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
  }

  .title {
    white-space: nowrap;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
</style>
